<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>查看所有租车情况</title>
    <link rel="stylesheet" href="css/styles.css">
</head>

<body>
    <header>

        <h1>查看所有租车情况</h1>
        <span style="font-size: 20px;">后台</span>
    </header>
    <div class="container">
        <nav>
            <ul>
                <li><a href="admin.html">首页</a></li>
                <li><a href="add-car.html">添加新车辆</a></li>
                <li><a href="rentals.html" class="active">查看所有车辆情况</a></li>
                <li><a href="edit-user.html">修改用户信息</a></li>
                <li><a href="reviews.html">查看修改评论</a></li>
                <li><a href="orders.html">查看订单</a></li>
            </ul>
        </nav>
        <main>
            <section>
                <h2>所有租车情况</h2>
                <table id="rental-table">
                    <thead>
                        <tr>
                            <th>租车ID</th>
                            <th>用户</th>
                            <th>车型</th>
                            <th>租赁期限</th>
                            <th>总金额</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- 假数据 -->
                        <tr>
                            <td>201</td>
                            <td>王五</td>
                            <td>经济型</td>
                            <td>2天</td>
                            <td>¥400</td>
                            <td>
                                <button class="edit-button" data-id="201">修改</button>
                                <button class="delete-button" data-id="201">删除</button>
                            </td>
                        </tr>
                        <tr>
                            <td>202</td>
                            <td>赵六</td>
                            <td>豪华型</td>
                            <td>7天</td>
                            <td>¥3500</td>
                            <td>
                                <button class="edit-button" data-id="202">修改</button>
                                <button class="delete-button" data-id="202">删除</button>
                            </td>
                        </tr>
                        <!-- 更多租车信息行 -->
                    </tbody>
                </table>
                <div class="pagination">
                    <button id="prev-page">上一页</button>
                    <span id="page-info">第 <span id="current-page">1</span> 页</span>
                    <button id="next-page">下一页</button>
                </div>
            </section>
        </main>
    </div>

    <!-- 模态框 -->
    <div id="edit-modal" class="modal">
        <div class="modal-content">
            <span class="close-button">&times;</span>
            <h2>修改租车信息</h2>
            <form id="edit-form">
                <label for="edit-rental-id">租车ID:</label>
                <input type="text" id="edit-rental-id" name="rental-id" readonly>
                <label for="edit-user">用户:</label>
                <input type="text" id="edit-user" name="user" readonly>
                <label for="edit-car-type">车型:</label>
                <input type="text" id="edit-car-type" name="car-type">
                <label for="edit-period">租赁期限:</label>
                <input type="number" id="edit-period" name="period" min="1">
                <label for="edit-amount">总金额:</label>
                <input type="number" id="edit-amount" name="amount" min="0">
                <button type="submit">保存</button>
            </form>
        </div>
    </div>

    <footer>
        <p>&copy; 2024 租车管理系统. 版权所有.</p>
    </footer>

    <script>
        document.addEventListener("DOMContentLoaded", function () {
            const modal = document.getElementById("edit-modal");
            const closeButton = document.querySelector(".close-button");
            const editButtons = document.querySelectorAll(".edit-button");
            const editForm = document.getElementById("edit-form");

            editButtons.forEach(button => {
                button.addEventListener("click", function () {
                    const row = this.parentElement.parentElement;
                    const rentalId = row.cells[0].innerText;
                    const user = row.cells[1].innerText;
                    const carType = row.cells[2].innerText;
                    const period = row.cells[3].innerText;
                    const amount = row.cells[4].innerText;

                    document.getElementById("edit-rental-id").value = rentalId;
                    document.getElementById("edit-user").value = user;
                    document.getElementById("edit-car-type").value = carType;
                    document.getElementById("edit-period").value = period;
                    document.getElementById("edit-amount").value = amount;

                    modal.style.display = "block";
                });
            });

            closeButton.addEventListener("click", function () {
                modal.style.display = "none";
            });

            window.addEventListener("click", function (event) {
                if (event.target == modal) {
                    modal.style.display = "none";
                }
            });

            editForm.addEventListener("submit", function (event) {
                event.preventDefault();
                const rentalId = document.getElementById("edit-rental-id").value;
                const carType = document.getElementById("edit-car-type").value;
                const period = document.getElementById("edit-period").value;
                const amount = document.getElementById("edit-amount").value;

                // 在这里进行保存修改后的租车信息的操作
                alert(`租车信息已保存: 租车ID ${rentalId}, 车型 ${carType}, 租赁期限 ${period}, 总金额 ¥${amount}`);

                modal.style.display = "none";
            });
        });
    </script>
</body>

</html>